<template>
    <div class="home">
        <div class="home-container">
            <div class="eventReminder">
                <Card>
                    <div class="title">
                        <p>快捷入口</p>
                    </div>
                    <div class="file">
                        <div class="pic-0ne">
                            <p class="text">生源信息汇总</p>
                            <Space direction="vertical">
                                <Space wrap>
                                    <Button type="dashed" size="small" ghost class="buttton" @click="look1">去查看 ></Button>
                                </Space>
                            </Space>
                        </div>
                        <div class="pic-two">
                            <p class="text">基础信息汇总</p>
                            <Space direction="vertical">
                                <Space wrap>
                                    <Button type="dashed" size="small" ghost class="buttton" @click="look2">去查看 ></Button>
                                </Space>
                            </Space>
                        </div>
                        <div class="pic-three">
                            <p class="text">去向登记信息</p>
                            <Space direction="vertical">
                                <Space wrap>
                                    <Button type="dashed" size="small" ghost class="buttton" @click="look3">去查看 ></Button>
                                </Space>
                            </Space>
                        </div>
                        <div class="pic-four">
                            <p class="text">去向登记审核</p>
                            <Space direction="vertical">
                                <Space wrap>
                                    <Button type="dashed" size="small" ghost class="buttton" @click="look4">去查看 ></Button>
                                </Space>
                            </Space>
                        </div>
                        <div class="pic-five">
                            <p class="text">数据总览</p>
                            <Space direction="vertical">
                                <Space wrap>
                                    <Button type="dashed" size="small" ghost class="buttton" @click="look5">去查看 ></Button>
                                </Space>
                            </Space>
                        </div>
                    </div>
                </Card>
            </div>

            <!--      去向登记数据概览-->
            <div class="eventReminder">
                <Card>
                    <div class="title">
                        <p>
                            数据概览
                        </p>
                    </div>
                    <div style="margin: 10px 20px">
                        <destination-data-overview />
                    </div>
                </Card>
            </div>
            <!--      事项提醒-->
            <div class="eventReminder">
                <Card>
                    <div class="title">
                        <p>
                            事项提醒
                            <router-link v-if="isShowMore" to="/todo-manage" style="float: right; cursor: pointer">更多</router-link>
                        </p>
                    </div>
                    <div class="eventReminder-content" style="margin: 10px 20px">
                        <employment-module />
                    </div>
                </Card>
            </div>
<!--            暂时隐藏-->
<!--            <div class="home-content">-->
<!--                &lt;!&ndash;        就业行业&ndash;&gt;-->
<!--                <div class="employmentModule">-->
<!--                    <Card>-->
<!--                        <div class="title">-->
<!--                            <p>就业行业</p>-->
<!--                        </div>-->
<!--                        <div class="employmentModule-content">-->
<!--                            <first-module />-->
<!--                        </div>-->
<!--                    </Card>-->
<!--                </div>-->
<!--                &lt;!&ndash;        就业对比&ndash;&gt;-->
<!--                <div class="employmentModule">-->
<!--                    <Card>-->
<!--                        <div class="title">-->
<!--                            <p>就业对比</p>-->
<!--                        </div>-->
<!--                        <div class="employmentModule-content">-->
<!--                            <second-module />-->
<!--                        </div>-->
<!--                    </Card>-->
<!--                </div>-->
<!--                &lt;!&ndash;        年龄分布&ndash;&gt;-->
<!--                <div class="employmentModule">-->
<!--                    <Card>-->
<!--                        <div class="title">-->
<!--                            <p>年龄分布</p>-->
<!--                        </div>-->
<!--                        <div class="employmentModule-content">-->
<!--                            <third-module />-->
<!--                        </div>-->
<!--                    </Card>-->
<!--                </div>-->
<!--                &lt;!&ndash;        各专业就业率&ndash;&gt;-->
<!--                <div class="employmentModule">-->
<!--                    <Card>-->
<!--                        <div class="title">-->
<!--                            <p>各专业就业率</p>-->
<!--                        </div>-->
<!--                        <div class="employmentModule-content">-->
<!--                            <four-module />-->
<!--                        </div>-->
<!--                    </Card>-->
<!--                </div>-->
<!--                &lt;!&ndash;        薪酬统计&ndash;&gt;-->
<!--                <div class="employmentModule">-->
<!--                    <Card>-->
<!--                        <div class="title">-->
<!--                            <p>薪酬统计</p>-->
<!--                        </div>-->
<!--                        <div class="employmentModule-content">-->
<!--                            <five-module />-->
<!--                        </div>-->
<!--                    </Card>-->
<!--                </div>-->
<!--                &lt;!&ndash;        主要就业地区分布&ndash;&gt;-->
<!--                <div class="employmentModule">-->
<!--                    <Card>-->
<!--                        <div class="title">-->
<!--                            <p>主要就业地区分布</p>-->
<!--                        </div>-->
<!--                        <div class="employmentModule-content">-->
<!--                            <six-module />-->
<!--                        </div>-->
<!--                    </Card>-->
<!--                </div>-->
<!--            </div>-->
        </div>
        <!--    <img style="width: 100%" src="../../assets/images//bg11.png" alt="">-->
    </div>
</template>

<script>
import employmentModule from '@/views/home/components/employmentModule.vue';
import destinationDataOverview from '@/views/home/components/destinationDataOverview.vue';
import firstModule from '@/views/home/components/firstModule.vue';
import secondModule from '@/views/home/components/secondModule.vue';
import thirdModule from '@/views/home/components/thirdModule.vue';
import fourModule from '@/views/home/components/fourModule.vue';
import fiveModule from '@/views/home/components/fiveModule.vue';
import sixModule from '@/views/home/components/sixModule.vue';
import hasRole from '@/libs/hasRole';

export default {
    name: 'home',
    components: {
        destinationDataOverview,
        employmentModule,
        firstModule,
        secondModule,
        thirdModule,
        fourModule,
        fiveModule,
        sixModule
    },
    data() {
        return {
            isShowMore: false
        };
    },
    methods: {
        look1() {
            this.$router.push('/bysPersonInfo');
        },
        look2() {
            this.$router.push('/bysXjInfo');
        },
        look3() {
            this.$router.push('/jyqxManage');
        },
        look4() {
            if (this.hasRole('ROLE_PROVINCE')) {
                this.$Message.warning("您没有权限查看此页面！请联系管理员")
            } else {
                this.$router.push('/jyqxsh');

            }
        },
        look5() {
            this.$router.push('/bysSjhz');
        }
    },
    mounted() {
        this.isShowMore = !this.hasRole('ROLE_PROVINCE');
    },
    beforeCreate() {
        if (this.hasRole('ROLE_USER')) {
            this.$router.push('/jyqxInfo');
        }
    }
};
</script>
<style lang="less">
@import '../../styles/single-common.less';

.home {
    width: 100%;
    height: 100%;
}
.file {
    margin: 20px;
    display: flex;
    justify-content: space-between;
}
.pic-0ne {
    width: 268px;
    height: 120px;
    background-image: url('../home/img/pic-0ne.png');
    background-repeat: no-repeat;
    // background-size: 100% ;
    background-size: 268px 120px;
}
.pic-two {
    width: 268px;
    height: 120px;
    background-image: url('../home/img/pic-two.png');
    background-repeat: no-repeat;
    // background-size: 100% ;
    background-size: 268px 120px;
}
.pic-three {
    width: 268px;
    height: 120px;
    background-image: url('../home/img/pic-three.png');
    background-repeat: no-repeat;
    // background-size: 100% ;
    background-size: 268px 120px;
}
.pic-four {
    width: 268px;
    height: 120px;
    background-image: url('../home/img/pic-four.png');
    background-repeat: no-repeat;
    // background-size: 100% ;
    background-size: 268px 120px;
}
.pic-five {
    width: 268px;
    height: 120px;
    background-image: url('../home/img/pic-five.png');
    background-repeat: no-repeat;
    // background-size: 100% ;
    background-size: 268px 120px;
}
.text {
    float: left;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: white;
    margin: 48px 0 48px 24px;
}
.buttton {
    float: right;
    border-radius: 20px;
    margin: 80px 18px 0 0;
}
@import './home.less';
</style>
